<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mac官网主页</title>
		<link rel="stylesheet" type="text/css" href="css/01-index.css"/>
		<link rel="stylesheet" type="text/css" href="css/公共代码.css"/>
		<link rel="stylesheet" type="text/css" href="图标图标/iconfont.css"/>
	</head>
	<body>
		<!--一,首页列表板块 -->
		<header>
			<div id="box"> 
				<!-- 左 -->
				<div class="logo"><img src="img/logo.ico" ></div>
				<!-- 中 -->
				<ul class="listlef">
					<li><a href="">人气口红</a></li>
					<li><a href="">热卖底妆</a></li>
					<li><a href="">LISA同款</a></li>
					<li><a href="">全新柔雾唇釉</a></li>
					<li class="newPro">	<a href="">新品推荐</a>
						<div>
							<ul>
								<li><a href="">幻彩无暇粉底液</a></li>
								<li><a href="">全新魅可挚爱柔缎唇膏</a></li>
								<li><a href="">全新麻薯腮红</a></li>
								<li><a href="">定制遮瑕修容</a></li>
								<li><a href="">尤雾弹唇膏</a></li>
								<li><a href="">定制无暇柔光散粉</a></li>
							</ul>
						</div>
					</li>
					<li class="allPro"><a href="">全部产品</a>
						<div>
							<ul>
								<li><a href="">人气推荐</a></li>
								<li><a href="">彩妆</a></li>
								<li><a href="">妆前</a></li>
								<li><a href="">护肤</a></li>
								<li><a href="">扇子和工具</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">会员中心</a></li>
					<li><a href="">门店专柜</a></li>
					<li><a href="">唇妆视频</a></li>
				</ul>
				<!-- 右 -->
				<div class="listrig">
					<ul>
						<a href=""><li class="iconfont icon-fangdajing"></li></a>
						<a href=""><li class="iconfont icon-youxiang"></li></a>
						<li><span class="reg"><a href="03reg.html">注册</a></span>/<span class="login"><a href="04login.html">登录</a></span></li>
					</ul>
				</div>
			<a href="05shopcar.html"><span class="shopcar iconfont icon-anquanshezhi"></span></a>
			</div>
		</header>
		<section>
			<!-- 1)大粉底液区域 -->
			<div id="fendiye">
				<img src="img/ia_600000001.webp">
				<div class="bigdiv">
					<span class="ones"><a href="">超全底色&nbsp;&nbsp;&nbsp;清透妆感</a></span>
					<span class="twos"><a href="">24小时持妆定制无瑕粉底液</a></span>
					<span class="thrs"><a href="">清透遮瑕不浮粉 控油抗汗在升级 打造匀净奶油肌</a></span>
					<span class="fous"><a href="">立即选购</a></span>
				</div>
			</div>
			<!-- 2)人气爆款区域 -->
			<div id="popularGoods">
				<p class="popularGoodsp">人气爆款</p>
				<div class="popular">
					<span class="lef" id="left">&lt;</span>
					<span class="rig" id="right">&gt;</span>
					<ul class="popularBox" id="popularBox">
						<li class="scroll">
						<!-- 粉底液 -->
						<dl id="popone">
							<dt>
								<span class="poprig">
									<ul>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
									</ul>
								</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000007.webp" >
							</dt>
							<dd>N12魅可定制无瑕粉底液<span class="popprice">¥320</span></dd>
						</dl>
						<!-- 生姜修容 -->
						<dl id="poptwo">
							<dt>
								<span class="poplef">BEST SELLER</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000004.webp" >
							</dt>
							<dd>魅可立体绒光修容饼<span class="popprice">¥340</span></dd>
						</dl>
						<!-- N18无暇粉底液 -->
						<dl id="popfou">
							<dt>
								<span class="poprig">
									<ul>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
									</ul>
								</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000006.webp" >
							</dt>
							<dd>魅可定制无瑕粉底液<span class="popprice">¥320</span></dd>
						</dl>
						</li>
						<li>
						<!-- 小辣椒口红 -->
						<!-- <dl id="popfiv">
							<dt>
								<span class="poplef">BEST SELLER</span>
								<span class="poprig">
									<ul>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
									</ul>
								</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000005.webp">
							</dt>
							<dd>柔感哑光唇膏</dd><span class="popprice">¥175</span>
							<dd>Chili 小辣椒</dd>
						</dl> -->
						<!-- 液体唇膏 -->
						<!-- <dl id="popsix">
							<dt>
								<span class="poplef">NEW</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000005.webp">
							</dt>
							<dd>丝缎柔雾液体唇膏</dd><span class="popprice">¥210</span>
							<dd>#982 Marrakesh-mere</dd>
						</dl> -->
						<!-- 保湿喷雾 -->
						<!-- <dl id="popsev">
							<dt>
								<span class="poprig">
									<ul>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
										<li class="iconfont iconfont icon-pingfen"></li>
									</ul>
								</span>
								<div class="gouwuche">
									<p><a href="">加入购物车</a></p>
								</div>
								<img src="img/ia_600000002.webp">
							</dt>
							<dd>魅可保湿喷雾</dd><span class="popprice">¥200</span>
							<dd>Rose 淡雅玫瑰</dd>
						</dl> -->
						</li>
					</ul>
				</div>
			</div>
			<!-- 3)摩洛哥红棕子弹头板块-->
			<div id="moluoge">
				<img src="./img/ia_600000008.jpg">
				<div class="bigdiv">
					<span class="ones"><a href="">柔雾唇膏 星品推荐</a></span>
					<span class="twos"><a href="">#925&nbsp;&nbsp;摩洛哥红棕</a></span>
					<span class="thrs"><a href="">一抹时髦美出圈,经典进阶用不出错,引领至IN红棕潮流</a></span>
					<span class="fous"><a href="">立即选购</a></span>
				</div>
			</div>
			<!-- 4)星品推荐区域 -->
			<div id="starGoods">
				<p class="startp">星品推荐</p>
				<div class="starGoodsone">
					<img src="img/ia_600000009.webp">
					<h2>定制无瑕柔光散粉</h2>
					<p><a href="">【人气推荐】Just Flirting <br>买即享散粉粉扑及保湿喷雾2.5ML*2</a></p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="starGoodsone">
					<img src="img/ia_600000010.webp">
					<h2>保湿控妆水 补水舒缓不挑皮</h2>
					<p><a href="">【人气推荐】自然原味ORIGINAL<br>买即享散粉粉扑及保湿喷雾</a></p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="starGoodsone">
					<img src="img/ia_600000011.webp">
					<h2>立体绒光修容饼</h2>
					<p><a href="">【人气推荐】 生姜高光<br>买即享便携双头刷</a></p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
			</div>
			
			<!-- 5)限定系列区域 -->
			<div id="limitGoods">
				<p class="Goodsp">限定系列</p>
				<span id="lef">&lt;</span>
				<span id="rig">&gt;</span>
				<div class="limit">
					<ul class="limitBox">
						<li class="scroll">
						<dl id="limone">
							<dt>
								<img src="img/ia_600000012.jpg">
							</dt>
							<dd>魅可新春限定柔雾唇膏<span class="limprice">¥180</span></dd>
							<dd>Luck Be A Lady 平安无花果</dd>
							<div class="gouwuche2">
								<a href="">加入购物车</a>
							</div>
						</dl>
						<dl id="limtwo">
							<dt>
								<img src="img/ia_600000013.webp">
							</dt>
							<dd>敦煌系列子弹头<span class="limprice">¥175</span></dd>
							<dd>Luck Be A Lady 开心每一天</dd>
							<div class="gouwuche2">
								<a href="">加入购物车</a>
							</div>
						</dl>
						<dl id="limthr">
							<dt>
								<img src="img/ia_600000014.webp">
							</dt>
							<dd>夜樱柔感哑光唇膏<span class="limprice">¥175</span></dd>
							<dd>Moody Bloom</dd>
							<div class="gouwuche2">
								<a href="">加入购物车</a>
							</div>
						</dl>
						</li>
						<!-- <li>
						<dl id="limfou">
							<dt>
								<img src="img/mac_sku_SL1801_280x320_0.webp">
							</dt>
							<dd>圣诞限量立体绒光修容饼</dd><span class="limprice">¥340</span>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						<dl id="limfiv">
							<dt>
								<img src="img/mac_sku_SL1708_280x320_0.webp">
							</dt>
							<dd>圣诞限量炫闪绒光小眼影</dd><span class="limprice">¥190</span>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						<dl id="limsix">
							<dt>
								<img src="img/mac_sku_SMAJ08_280x320_0.webp">
							</dt>
							<dd>夜樱晶透亮彩润唇膏</dd><span class="limprice">¥175</span>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						</li>
						<li>
						<dl id="limsev">
							<dt>
								<img src="img/mac_sku_SMC809_280x320_0.webp">
							</dt>
							<dd>夜樱立体绒光腮红</dd><span class="limprice">¥280</span>
							<dd>Room to Boom</dd>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						<dl id="limeig">
							<dt>
								<img src="img/mac_sku_SMAK02_280x320_0.webp">
							</dt>
							<dd>夜樱系列保湿喷雾</dd><span class="limprice">¥200</span>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						<dl id="limsev">
							<dt>
								<img src="img/mac_sku_SMC809_280x320_0.webp">
							</dt>
							<dd>夜樱立体绒光腮红</dd><span class="limprice">¥280</span>
							<dd>Room to Boom</dd>
							<div class="gouwuche2">
								<p><a href="">加入购物车</a></p>
							</div>
						</dl>
						</li> -->
					</ul>
				</div>
			</div>
			
			<!-- 6)大子弹头和大眼影区域 -->
			<div id="twoGoods">
				<div class="twoGoodsone">
					<img src="img/ia_600000015.webp">
					<h2>经典子弹头唇膏</h2>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="twoGoodsone">
					<img src="img/ia_600000016.webp">
					<h2>魅可丝缎柔雾哑光小眼影</h2>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
			</div>
			
			<!-- 7)最新美妝潮流-->
			<div id="newBeauty">
				<p class="startp">最新美妝潮流</p>
				<div class="newBeautyone">
					<img src="img/product_fot_pc_20210330_01.webp">
					<h2>魅可清透美颜蜜粉</h2>
					<p>买即享散粉粉扑保湿喷雾2.5ML*2</p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="newBeautyone">
					<img src="img/product_fot_pc_20210330_02.webp">
					<h2>魅可焕采元气腮红</h2>
					<p><a href="">【人气推荐】CHEER UP</p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="newBeautyone">
					<img src="img/product_fot_pc_20210330_03.jpg">
					<h2>时尚焦点小眼影</h2>
					<p><a href="">【人气推荐】OMEGA</p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
			</div>
			
			<!-- 8)会员区域 -->
			<div id="vip">
				<img src="img/home_KV3_pc_0122s-1.webp">
				<div class="vipdiv">
					<span class="twos">加入魅可会员<br>享受专属权益</span>
					<span class="thrs">关注M·A·C魅可官方微信公众号，绑定会员中心小程序即可成为M·A·C魅可会员，<br>前往官方商城消费即可获得会员积分，兑换专属礼品享受更多会员福利！</span>
				</div>
			</div>
			
			<!--9) 底妆分享:underdress -->
			<div id="underdress">
				<p class="startp">底妆专享</p>
				<div class="underdressone">
					<img src="img/product_fot3_pc_20210330_2.webp">
					<h2>敦煌限定系列</h2>
					<p><a href="">【同款推荐】RUBY WOO</a></p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="underdressone">
					<img src="img/product_fot3_pc_20210330_1.webp">
					<h2>夜樱幻境限定系列</h2>
					<p><a href="">【新色推荐】MOODY BLOOM浓郁正红</a></p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
				<div class="underdressone">
					<img src="img/product_fot3_pc_20210224_3.jpg">
					<h2>新年限定系列</h2>
					<p><a href="">【人气推荐】LUCK BE ALADY 平安无花果<br>HEALTHY,WEAL THY AND THRIVING 招财石榴</p>
					<div>
						<a href="">立即选购</a>
					</div>
				</div>
			</div>
			<!-- 10.在线咨询 -->
			<div id="advice">
				<div class="advicebox">
					<span class="advicemsg iconfont icon-xinxi"><a href="">在线咨询</a></span>
					<span><a href="">热卖口红 底妆精选</a></span>
				</div>
			</div>
		</section>
		
		
		<footer>
			<div id="footbox">
				<ul>
					<li class="firstli">门店地址</li>
					<li><a href="">查找门店</a></li>
					<li><a href="">魅可定制美妆</a></li>
					<li class="firstli">会员</li>
					<li><a href="">会员中心</a></li>
				</ul>
				<ul>
					<li class="firstli">客户服务</li>
					<li><a href="">联系我们</a></li>
					<li>官方商城服务热线:</li>
					<li><a href="">400-602-9566</a></li>
					<li>专柜客户关怀热线:</li>
					<li><a href="">400-821-1308</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">订单情况</a></li>
				</ul>
				<ul>
					<li class="firstli">关于我们</li>
					<li><a href="">品牌故事</a></li>
					<li><a href="">艾滋病基金会</a></li>
					<li><a href="">M·A·C魅可官网购物五大理由</a></li>
					<li><a href="">M·A·C魅可专业会员</a></li>
					<li class="firstli">公司地址</li>
					<li><a href="">上海市静安区延安中路1228号<br>静安嘉里中心三座11楼</a></li>
				</ul>
				<ul>
					<li class="firstli">账户</li>
					<li><a href="">账户</a></li>
					<li><a href="">订单状态</a></li>
					<li><a href="">我的收藏</a></li>
				</ul>
				<ul>
					<li class="firstli">链接</li>
						<li>
							<a href="">
								<span class="iconfont icon-25"></span>
								<span class="iconfont icon-dingwei1"></span>
								<span class="iconfont icon-xinlang"></span>
							</a>
						</li>
					<li><img src="img/ia_600000032.webp"></li>
				</ul>
			</div>
		</footer>
	</body>
	<script src="js/machine.js"></script>
	// <script>
	// 	// 人气爆款系列和限定系列的轮播图部分
	// 	// 一,人气爆款区域轮播图
		var right = $("#right");
		var left = $("#left");
		var liList = document.querySelectorAll(".popularBox>li");
		var result=0
		function addClassName(){
			for(var i=0;i<liList.length;i++){
				// 清除类名
				liList[i].className=""
			}
			liList[result].className="scroll";
		}
		right.onclick=function(){
			if(result!==liList.length-1){
				result++
			}
			else{
				result=0;
			}
			addClassName()
		}
		left.onclick=function(){
			if(result!==0){
				result--
			}
			else{
				result=liList.length-1;
			}
			addClassName()
		}
		// 自动播放
		var timedate=setInterval(function(){
			right.click();
		},2000)
		popularBox.onmouseenter=function(){
			clearInterval(timedate)
		}
		popularBox.onmouseleave=function(){
			var timedate=setInterval(function(){
				left.click();
			},2000)
		}
		
		
		// 限定系列的轮播图部分
		var right = $("#rig");
		var left = $("#lef");
		var LiList=document.querySelectorAll(".limitBox li")
		var result=0
		function addddClassName(){
			for(var i=0;i<LiList.length;i++){
				// 清除类名
				LiList[i].className=""
			}
			LiList[result].className="scroll"
		}
		right.onclick=function(){
			if(result!==LiList.length-1){
				result++
			}
			else{
				result=0;
			}
			addddClassName()
		}
		left.onclick=function(){
			if(result!==0){
				result--
			}
			else{
				result=LiList.length-1;
			}
			addddClassName()
		}
		// 自动播放
		var timedate=setInterval(function(){
			right.click();
		},2000)
		box.onmouseenter=function(){
			clearInterval(timedate)
		}
		box.onmouseleave=function(){
			var timedate=setInterval(function(){
				left.click();
			},2000)
		}
	</script>
</html>
